<template>
  <div id="app">
    <div class="add">
      <!-- ui框架的按钮 -->
      <el-button type="primary" icon="el-icon-plus" @click="ADD"
        >添加</el-button
      >
    </div>
    <!-- 表格
        属性介绍
            :data 是需要用到的数据
            border 是否需要边框
            el-table-columu 表格的每一列
            prop 是数据
            label是标题
            width是占的宽度
        -->
    <div class="table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          type="index"
          prop="date"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="tmName"
          label="品牌名称"
          width="width"
        ></el-table-column>
        <el-table-column label="品牌LOGO" width="width">
          <template slot-scope="{ row }">
            <img :src="row.logoUrl" alt style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="width">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="editMark(row)">修改</el-button>
            <el-button type="danger" @click="delMark(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页功能 
        当前第几页、数据总条数、每一页展示条数，连续页码数
        :current-page：代表第几页
        total:一共有多少条
        page-size:一页显示多少条数据
         page-sizes:代表每一页可以展示多少条数据
         layout：分页器的布局
         pager-count:按钮数量
        -->
    <el-pagination
      style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[3, 5, 10]"
      :page-size="pageNum"
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="total"
    ></el-pagination>

    <!-- 添加修改 -->
    <div class="addTradeMark">
      <el-dialog
        :destroy-on-close="true"
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="dialogClose"
      >
        <el-form
          :rules="rules"
          :model="addformlist"
          style="width: 80%; margin: auto"
          ref="rulesRef"
        >
          <el-form-item label="品牌名称" prop="tmName">
            <el-input
              v-model="addformlist.tmName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" prop="logoUrl">
            <!-- 

                :on-success="handleAvatarSuccess" 上传成功
                :before-upload="beforeAvatarUpload" 开始上传
               -->
            <el-upload
              class="avatar-uploader"
              action="dev-api/admin/product/fileUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="addformlist.logoUrl"
                :src="addformlist.logoUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="call">取 消</el-button>
          <el-button type="primary" @click="addRradeMark()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getTradeMark,
  addTradeMark,
  delTradeMark,
} from "@/api/product/tradeMark";
export default {
  name: "tradeMark",
  data() {
    return {
      // 数据列表
      list: [],
      // 一页展示多少条数据
      pageNum: 3,
      // 第几页
      current: 1,
      // 一共有多少条数据
      total: 0,
      // 弹框是否展示
      dialogFormVisible: false,
      // 添加得表单数据
      addformlist: {
        tmName: "",
        logoUrl: "",
      },
      //   图片地址
      imageUrl: "",
      //   显示添加还是修改
      title: "",
      // 表单验证
      rules: {
        tmName: [
          { required: true, message: "请输入品牌名称", trigger: "change" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "change",
          },
        ],
        logoUrl: [
          { required: true, message: "请上传品牌logo", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getTradeMark(this.current, this.pageNum);
      console.log(res);
      if (res.code === 200) {
        this.list = res.data.records;
        this.total = res.data.total;
      }
    },
    // 这个是一页显示多少个得
    handleSizeChange(num) {
      // console.log(num);
      this.pageNum = num;
      this.getList();
    },
    handleCurrentChange(num) {
      this.current = num;
      this.getList();
    },
    // 点击添加
    ADD() {
      this.title = "添加品牌";
      this.dialogFormVisible = true;
      // 清空数据
      this.addformlist = { tmName: "", logoUrl: "" };
    },
    // 图片开始上传的时候
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/png" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.addformlist.logoUrl = res.data;
      console.log(this.addformlist);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 弹框的取消按钮
    call() {
      this.dialogFormVisible = false;
      this.addformlist.logoUrl = "";
      this.addformlist.tmName = "";
    },
    // 确认添加
    addRradeMark() {
      console.log(this.$refs);
      this.$refs.rulesRef.validate(async (valid) => {
        if (valid) {
          // 添加接口去请求数据
          let res = await addTradeMark(this.addformlist);
          console.log(res);
          if (res.code === 200) {
            this.dialogFormVisible = false;
            this.getList();
            this.$message.success(
              this.addformlist.id ? "修改成功" : "添加成功"
            );
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 弹框关闭
    dialogClose() {
      this.addformlist.logoUrl = "";
      this.addformlist.tmName = "";
    },
    // 修改品牌
    editMark(row) {
      this.dialogFormVisible = true;
      this.addformlist = { ...row };
    },
    // 删除品牌
    delMark(row) {
      this.$confirm(`此操作将永久删除品牌${row.tmName}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delTradeMark(row.id);
          console.log(res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
